<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>初审</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
        <link rel="stylesheet" type="text/css" href="../css/index.css" />
        <script src="../js/mui.min.js"></script>
        <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
        	.mui-control-content {
				min-height: 1000px;
			}
			.mui-card{
				margin: 8px auto;
			}
			.mui-card-header p{
				margin-bottom: 0;
				color: red;
				font-size: 12px;
				padding: 0px;
			}
			.mui-ellipsis{
				color: black;
			}
			.mui-card-footer, .mui-card-header{
				min-height: 28px;
				padding: 0px 15px;
			}
			.mui-card-footer a{
				font-size: 12px;
			}
			.mui-table-view{
				
			}
			
		.detail-article{width: 100%; overflow: hidden; background-color: #fff}
        .detail-article nav{ width: 100%;}
        .detail-article nav ul{ width: 100%; padding:5% 0; overflow: hidden; display: table;margin:0 auto;}
        .detail-article nav ul li{ display: table-cell; width: 33.333333%; text-align: center; font-size:15px; color: #585959; border-bottom:solid 1px #C3C3C3; padding: 2% 0;  }        
        .detail-article nav ul .article-active{ border-bottom:2px solid #F14E41; color:#F14E41;}
        </style>
	</head>
	<body>
		<header class="mui-bar mui-table-view all-top">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的审批</h1>
			<a id='showUserPicker' class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<!--tab-->
	    <article class="detail-article" style="margin-top: 2rem;">
				<nav>
					<ul class="article">
						<li id="talkbox1">初审</li>
						<li id="talkbox2" >复审</li>
						<li id="talkbox3" class="article-active">全部</li>
					</ul>
				</nav>
				<section class="talkbox1" style="margin-top: -1rem;">					
					<div class="mui-content">
									<div class="mui-card">
										<div class="mui-card-header"><p>复审</p></div>
										<ul class="mui-table-view">
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;" class="oneB">
													<img class="mui-media-object mui-pull-left" src="../images/book.jpg">
													<div class="mui-media-body">
														<p class='mui-ellipsis'>我为你洒下月光</p>
														<p style="float: right;color: red;font-size: 12px;">分红：&yen;11</p>
													</div>
												</a>
											</li>
										</ul>
										<div class="mui-card-footer">
											<a class="mui-card-link">地址：财富中心</a>
											<a class="mui-card-link">分享方式：自提柜</a>
										</div>
									</div>
									<div class="mui-card">
										<div class="mui-card-header"><p>复审</p></div>
										<ul class="mui-table-view">
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;" class="oneB">
													<img class="mui-media-object mui-pull-left" src="../images/book2.jpg">
													<div class="mui-media-body">
														<p class='mui-ellipsis'>仅记住所有快乐</p>
														<p style="float: right;color: red;font-size: 12px;">分红：&yen;11</p>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;" class="oneB">
													<img class="mui-media-object mui-pull-left" src="../images/book.jpg">
													<div class="mui-media-body">
														<p class='mui-ellipsis'>我为你洒下月光</p>
														<p style="float: right;color: red;font-size: 12px;">分红：&yen;11</p>
													</div>
												</a>
											</li>
										</ul>
										<div class="mui-card-footer">
											<a class="mui-card-link">地址：财富中心</a>
											<a class="mui-card-link">分享方式：自提柜</a>
										</div>
									</div>
								</div>
				</section>
				<section class="talkbox2" style="display: none; margin-top: -1rem;">					
                    <div class="mui-content">
									<div class="mui-card">
										<div class="mui-card-header"><p>全部</p></div>
										<ul class="mui-table-view">
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;" class="oneB">
													<img class="mui-media-object mui-pull-left" src="../images/book.jpg">
													<div class="mui-media-body">
														<p class='mui-ellipsis'>我为你洒下月光</p>
														<p style="float: right;color: red;font-size: 12px;">分红：&yen;11</p>
													</div>
												</a>
											</li>
										</ul>
										<div class="mui-card-footer">
											<a class="mui-card-link">地址：财富中心</a>
											<a class="mui-card-link">分享方式：自提柜</a>
										</div>
									</div>
									<div class="mui-card">
										<div class="mui-card-header"><p>全部</p></div>
										<ul class="mui-table-view">
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;" class="oneB">
													<img class="mui-media-object mui-pull-left" src="../images/book2.jpg">
													<div class="mui-media-body">
														<p class='mui-ellipsis'>仅记住所有快乐</p>
														<p style="float: right;color: red;font-size: 12px;">分红：&yen;11</p>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;" class="oneB">
													<img class="mui-media-object mui-pull-left" src="../images/book.jpg">
													<div class="mui-media-body">
														<p class='mui-ellipsis'>我为你洒下月光</p>
														<p style="float: right;color: red;font-size: 12px;">分红：&yen;11</p>
													</div>
												</a>
											</li>
										</ul>
										<div class="mui-card-footer">
											<a class="mui-card-link">地址：财富中心</a>
											<a class="mui-card-link">分享方式：自提柜</a>
										</div>
									</div>
								</div>
				</section>
				<section class="talkbox3" style="display: none; margin-top: -1rem;">					
                    <div class="mui-content">
									<div class="mui-card">
										<div class="mui-card-header"><p>全部</p></div>
										<ul class="mui-table-view">
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;" class="oneB">
													<img class="mui-media-object mui-pull-left" src="../images/book.jpg">
													<div class="mui-media-body">
														<p class='mui-ellipsis'>我为你洒下月光</p>
														<p style="float: right;color: red;font-size: 12px;">分红：&yen;11</p>
													</div>
												</a>
											</li>
										</ul>
										<div class="mui-card-footer">
											<a class="mui-card-link">地址：财富中心</a>
											<a class="mui-card-link">分享方式：自提柜</a>
										</div>
									</div>
									<div class="mui-card">
										<div class="mui-card-header"><p>全部</p></div>
										<ul class="mui-table-view">
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;" class="oneB">
													<img class="mui-media-object mui-pull-left" src="../images/book2.jpg">
													<div class="mui-media-body">
														<p class='mui-ellipsis'>仅记住所有快乐</p>
														<p style="float: right;color: red;font-size: 12px;">分红：&yen;11</p>
													</div>
												</a>
											</li>
											<li class="mui-table-view-cell mui-media">
												<a href="javascript:;" class="oneB">
													<img class="mui-media-object mui-pull-left" src="../images/book.jpg">
													<div class="mui-media-body">
														<p class='mui-ellipsis'>我为你洒下月光</p>
														<p style="float: right;color: red;font-size: 12px;">分红：&yen;11</p>
													</div>
												</a>
											</li>
										</ul>
										<div class="mui-card-footer">
											<a class="mui-card-link">地址：财富中心</a>
											<a class="mui-card-link">分享方式：自提柜</a>
										</div>
									</div>
								</div>
				</section>				
			</article>
		
		
<script type="text/javascript">
	$(function(){
		$('.article li').click(function(){

			$(this).addClass('article-active').siblings().removeClass('article-active');
			if($(this).attr("id")=="talkbox1"){
				$('.talkbox1').show();
				$('.talkbox2').hide();
				$('.talkbox3').hide();
			}else if($(this).attr("id")=="talkbox2"){
				$('.talkbox2').show();
				$('.talkbox1').hide();
			    $('.talkbox3').hide();
			}else{
				$('.talkbox3').show();
				$('.talkbox1').hide();
				$('.talkbox2').hide();
			}

		});	
	});
</script>
	</body>
</html>
